<template>
  <div class="app-container">
    <el-form ref="form" :model="form" size="mini" :rules="rules" label-width="150px">
      <el-form-item label="设置工作日：" prop="weekday">
        <el-checkbox-group v-model="form.weekday" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in checkList" :label="city" :key="city">{{
            city
            }}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-form-item>
      <el-form-item label="上班允许打卡时间：" prop="clockDate">
        <el-time-picker is-range arrow-control v-model="form.clockDate" range-separator="~" start-placeholder="开始时间"
          end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm:ss" :value-format="'HH:mm:ss'">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="下班允许打卡时间：" prop="clockoutDate">
        <el-time-picker is-range arrow-control v-model="form.clockoutDate" range-separator="~" start-placeholder="开始时间"
          end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm:ss" :value-format="'HH:mm:ss'">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="允许打卡范围：" prop="position">
        <el-select placeholder="请选择范围" v-model="form.position" clearable filterable>
          <el-option v-for="(m, index) in rangeList" :key="index" :label="m.label" :value="m.value"></el-option>
        </el-select>
        <span class="tip">设置后，距离考勤打卡位置n米可进行打卡</span>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="btn" @click="submit">提 交</el-button>
  </div>
</template>

<script>
import { getSchedule, addSchedule } from "@/api/personnel/attendance";
const checkOptions = [
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期日",
];

export default {
  name: "Operlog",
  data() {
    return {
      checkOptionstatus: {
        "星期一": '1',
        "星期二": '2',
        "星期三": '3',
        "星期四": '4',
        "星期五": '5',
        "星期六": '6',
        "星期日": '7',
      },
      rules: {
        weekday: [{ required: true, message: "请选择工作日", trigger: "blur" }],
        clockDate: [
          {
            required: true,
            message: "请选择上班允许打卡时间",
            trigger: "blur",
          },
        ],
        clockoutDate: [
          {
            required: true,
            message: "请选择下班允许打卡时间",
            trigger: "blur",
          },
        ],
        position: [
          { required: true, message: "请选择允许打卡范围", trigger: "blur" },
        ],
      },
      // 表单参数
      form: {
        weekday: [],
        clockDate: [],
        clockoutDate: [],
        position: null,
      },
      checkList: checkOptions,
      checkAll: false,
      isIndeterminate: false,
      rangeList: [
        {
          label: "100米",
          value: 100,
        },
        {
          label: "200米",
          value: 200,
        },
        {
          label: "300米",
          value: 300,
        },
        {
          label: "400米",
          value: 400,
        },
        {
          label: "500米",
          value: 500,
        },
        {
          label: "600米",
          value: 600,
        },
        {
          label: "700米",
          value: 700,
        },
        {
          label: "800米",
          value: 800,
        },
      ],
      scheduleParams: {
        distance: "",
        workEndDownTime: "",
        workEndUpTime: "",
        workStartDownTime: "",
        workStartUpTime: "",
        workday: "",
      },
    };
  },
  created() {
    getSchedule().then((response) => {
      if (response.data) {
        this.scheduleParams = { ...response.data }
        this.form.clockDate = [this.scheduleParams.workStartUpTime, this.scheduleParams.workStartDownTime]
        this.form.clockoutDate = [this.scheduleParams.workEndUpTime, this.scheduleParams.workEndDownTime]
        this.form.position = this.scheduleParams.distance
        const workdayArray = this.scheduleParams.workday.split(',').map(num => {
          return Object.keys(this.checkOptionstatus).find(key => this.checkOptionstatus[key] === num);
        });
        this.form.weekday = workdayArray
      }
    });
  },
  methods: {
    //全选
    handleCheckAllChange(val) {
      this.form.weekday = val ? checkOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkList.length;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.scheduleParams.distance = this.form.position;
          this.scheduleParams.workEndDownTime = this.form.clockoutDate[1];
          this.scheduleParams.workEndUpTime = this.form.clockoutDate[0];
          this.scheduleParams.workStartDownTime = this.form.clockDate[1];
          this.scheduleParams.workStartUpTime = this.form.clockDate[0];
          const workdaystring = this.form.weekday.map(day => this.checkOptionstatus[day]).join(',')
          this.scheduleParams.workday = workdaystring;
          addSchedule(this.scheduleParams).then((response) => {
            this.$message.success("提交成功");
          });
        } else {
          this.$message.error("提交失败");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .tip {
    margin-left: 10px;
    font-size: 12px;
  }

  .btn {
    position: relative;
    margin-top: 20px;
    left: 10vw;
  }
}
</style>
